<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="mt-20">

          <!-- <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> -->
          <el-table :data="data" v-loading="loading">
            <el-table-column prop="pageName" label="图片类型" min-width="120" show-overflow-tooltip> 
            </el-table-column>
            <el-table-column prop="pageUrl" label="pc图片" min-width="180">
              <template slot-scope="scope">
                  
                   <el-tooltip class="item" effect="dark" popper-class="toolTip"  placement="right" visible-arrow=true>
                      <div slot="content">{{textTip(scope.row.pageName)}}</div>                  
                      <el-button type="text" v-if="scope.row.pageUrl" @click="showPic(scope.row)">查看</el-button>
                  </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="phonePageUrl" label="手机图片" min-width="180">
              <template slot-scope="scope">
                
                <el-tooltip class="item" effect="dark" popper-class="toolTip"  placement="right" visible-arrow=true>
                      <div slot="content">{{textTipPhone(scope.row.pageName)}}</div>                  
                     <el-button type="text" v-if="scope.row.phonePageUrl" @click="showPhonePic(scope.row)">查看</el-button>
                  </el-tooltip> 
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="doEdit(scope.row)">上传pc图片</el-button>
                <el-button type="text" @click="doPhoneEdit(scope.row)">上传手机图片</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-upload
      :action="actionUrl + '?fileType=2&businessType=3'"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload"
      :on-error="errorUpload"
      style="display:none"
      >
      <el-button type="primary" id="uploadHidden">点击上传</el-button>
    </el-upload>
    <el-dialog :title="title" :visible.sync="picVisible" width="500px">
      <img :src="pic" alt="" width="100%">
    </el-dialog>


    <!--手机图片-->
    <el-upload
      :action="actionUrl + '?fileType=2&businessType=3'"
      :on-success="uploadPhoneSuccess"
      :before-upload="beforeUpload"
      :on-error="errorUpload"
      style="display:none"
      >
      <el-button type="primary" id="uploadPhoneHidden">点击上传</el-button>
    </el-upload>
    <el-dialog :title="title" :visible.sync="phonePicVisible" width="500px">
      <img :src="phonePic" alt="" width="100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      data: [],
      editData: {},
      editPhoneData: {},
      dialogImageUrl: '',
      dialogVisible: false,
      actionUrl: '',
      pic: '',
      phonePic: '',
      title: '',
      picVisible: false,
      phonePicVisible: false,
      total: 0,
    }
  },
  activated() {
    this.actionUrl = this.$api.upload()
    this.loadData()
  },
  created() {
    this.actionUrl = this.$api.upload()
    this.loadData()
    this.textTip()
    this.textTipPhone()
  },
  methods: {
    loadData() {
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }
      this.loading = true;
      this.$api.brand.getList(params).then(res => {
        if(res.success){
          this.data = res.data.list
          this.total = res.data.total
          this.loading = false
        } else{
          this.loading = false
        }
      }).catch(err => {
        this.loading = false
      })
    },
    doEdit(data) {
      this.editData = data;
      let fileInput = document.getElementById('uploadHidden')
      fileInput.click();
    },
    doPhoneEdit(data){
      this.editPhoneData = data;
      let fileInput = document.getElementById('uploadPhoneHidden')
      fileInput.click();
    },
    beforeUpload() {
      this.loading = true
    },
    uploadSuccess(res, file) {
      const params = {
        ...this.editData,
        pageUrl: res.data.totalUrl
      }
      this.$api.brand.update(params).then(res => {
        if(res.success){
          this.$message.success('上传成功')
          this.loadData()
          this.loading = false
        } else {
          this.loading = false
        }
      })
      this.loading = false
    },
    uploadPhoneSuccess(res, file){
      const params = {
        ...this.editPhoneData,
        phonePageUrl: res.data.totalUrl
      }
      this.$api.brand.update(params).then(res => {
        if(res.success){
          this.$message.success('上传成功')
          this.loadData()
          this.loading = false
        } else {
          this.loading = false
        }
      })
      this.loading = false
    },
    errorUpload() {
      this.loading = false
    },
    showPic(data) {
      console.log(data)
      this.title = data.pageName
      this.pic = data.pageUrl;
      this.picVisible = true;
    },
    showPhonePic(data){
      this.title = data.pageName
      this.phonePic = data.phonePageUrl;
      this.phonePicVisible = true;
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
    },
    handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
    },
    textTip(val){
      
      let data={
         品牌背景:'1400*450PX',
         学习中心:'1400*510PX',
         品牌案例:'700*450PX',
         服务商生态:'700*450PX',
         最新活动:'700*450PX',
         热点资讯:'700*450PX',
         'Q&A提问':'1400*458PX',
      }
      let returnVal=''
      Object.keys(data).map(function(item,i){
         
          if(val==item){
              returnVal= data[item]
          }
      })
        
      return returnVal
      

    },
    textTipPhone(val){
      
      let data={
         品牌背景:'750*375PX',
         学习中心:'686*477PX',
         品牌案例:'686*477PX',
         服务商生态:'686*477PX',
         最新活动:'686*477PX',
         热点资讯:'686*477PX',
         'Q&A提问':'750*600PX',
      }
      let returnVal=''
      Object.keys(data).map(function(item,i){
         
          if(val==item){
              returnVal= data[item]
          }
      })
        
      return returnVal
      

    }
  }
}
</script>

<style lang="less" scope>
.toolTip{
background: #fff !important;
color: #333 !important;

}
.toolTip div:nth-child(2)::after{
    border-right-color: #fff !important;
}

.toolTip div:nth-child(2){
    border-right-color: #fff !important;   
}

</style>
